window.addEventListener('load', function () {

    // 提取元素
    // 渲染提取
    let tbody = document.querySelector('tbody')

    // 添加按钮提取
    let btnAddDialog = document.querySelector('.btnAddDialog')
    let addModal = document.querySelector('#addModal')
    let btnAddStu = document.querySelector('.btnAddStu')
    let addform = document.querySelector('.add-form')
    // 省
    let province = document.querySelector('[name="province"]')
    // 市
    let city = document.querySelector('[name="city"]')
    // 区
    let county = document.querySelector('[name="county"]')

    let btnreset = document.querySelector('.btnreset')









    // 渲染
    function init() {
        axios({
            method: 'get',
            url: '/student/list',

        }).then(res => {
            console.log(res);
            if (res.data.code == 0) {
                let htmlStr = ''
                res.data.data.forEach(function (value, index) {
                    htmlStr += `
                                <tr>
                                <th scope="row">${index + 1}</th>
                                <td>${value.name}</td>
                                <td>${value.age}</td>
                                <td>${value.sex}</td>
                                <td>${value.group}</td>
                                <td>${value.phone}</td>
                                <td>${value.salary}</td>
                                <td>${value.truesalary}</td>
                                <td>${value.province + value.city + value.county}
                                </td>
                                <td>
                                  <button type="button" class="btn btn-primary btn-sm">修改</button>
                                  <button type="button" class="btn btn-danger btn-sm">删除</button>
                                </td>
                                </tr>
                                `
                })

                tbody.innerHTML = htmlStr

            }
        })
    }
    init()



    // 加载省的数据
    axios({
        method: 'get',
        url: '/geo/province',
    }).then(res => {
        let htmlStr = '<option selected value="">--省--</option>'
        res.data.forEach(function (value) {
            htmlStr += `<option value="${value}">${value}</option>`
        })
        province.innerHTML = htmlStr
    })

    // 加载市的数据
    province.addEventListener('change', function () {
        city.innerHTML = '<option selected value="">--市--</option>'
        county.innerHTML = '<option selected value="">--县--</option>'

        let pname = province.value

        if (!pname) {

            return
        }
        axios({
            method: 'get',
            url: '/geo/city',
            params: { pname }
        }).then(res => {
            let htmlStr = '<option selected value="">--市--</option>'
            res.data.forEach(function (value) {
                htmlStr += `<option value="${value}">${value}</option>`
            })
            city.innerHTML = htmlStr
        })
    })

    // 加载区的数据
    city.addEventListener('change', function () {
        county.innerHTML = '<option selected value="">--县--</option>'

        let pname = province.value
        let cname = city.value
        if (!cname) {
            return
        }
        axios({
            method: 'get',
            url: 'geo/county',
            params: { pname, cname }
        }).then(res => {
            let htmlStr = '<option selected value="">--县--</option>'
            res.data.forEach(function (value) {
                htmlStr += `<option value="${value}">${value}</option>`
            })
            county.innerHTML = htmlStr
        })
    })

    // 添加数据的校验
    function student() {
        return {
            fields: {
                name: {
                    validators: {
                        notEmpty: {
                            message: '姓名不能为空'
                        },
                        stringLength: {
                            min: 2,
                            max: 10,
                            message: '姓名长度2~10位'
                        }
                    }
                },
                age: {
                    validators: {
                        notEmpty: {
                            message: '年龄不能为空'
                        },
                        greaterThan: {
                            value: 18,
                            message: '年龄不能小于18岁'
                        },
                        lessThan: {
                            value: 60,
                            message: '年龄不能超过60岁'
                        }
                    }
                },
                sex: {
                    validators: {
                        choice: {
                            min: 1,
                            max: 1,
                            message: '请选择性别'
                        }
                    }
                },
                group: {
                    validators: {
                        notEmpty: {
                            message: '组号不能为空'
                        },
                        regexp: {
                            regexp: /^\d{1,2}$/,
                            message: '请选择有效的组号'
                        }
                    }
                },
                phone: {
                    validators: {
                        notEmpty: {
                            message: '手机号不能为空'
                        },
                        regexp: {
                            regexp: /^1\d{10}$/,
                            message: '请填写有效的手机号'
                        }
                    }
                },
                salary: {
                    validators: {
                        notEmpty: {
                            message: '实际薪资不能为空'
                        },
                        greaterThan: {
                            value: 800,
                            message: '期望薪资不能低于800'
                        },
                        lessThan: {
                            value: 100000,
                            message: '期望薪资不能高于100000'
                        }
                    }
                },
                truesalary: {
                    validators: {
                        notEmpty: {
                            message: '实际薪资不能为空'
                        },
                        greaterThan: {
                            value: 800,
                            message: '实际薪资不能低于800'
                        },
                        lessThan: {
                            value: 100000,
                            message: '实际薪资不能高于100000'
                        }
                    }
                },
                province: {
                    validators: {
                        notEmpty: {
                            message: '省份必填'
                        }
                    }
                },
                city: {
                    validators: {
                        notEmpty: {
                            message: '市必填'
                        }
                    }
                },
                county: {
                    validators: {
                        notEmpty: {
                            message: '县必填'
                        }
                    }
                }
            }
        }
    }

    // 添加按钮
    btnAddDialog.addEventListener('click', function () {
        $('#addModal').modal('show')
    })



    // 模态框确认按钮
    $('.add-form').bootstrapValidator(student()).on('success.form.bv', function (e) {
        e.preventDefault()
        // 收集数据
        let formdata = new FormData(addform)
        let data = {}
        formdata.forEach(function (value, index) {
            data[index] = value
        })

        // 发起ajax请求
        axios({
            method: 'post',
            url: '/student/add',
            data
        }).then(res => {
            console.log(res)
            if (res.data.code == 0) {
                toastr.success(res.data.message)
                btnreset.click()
                $('#addModal').modal('hide')

                init()
            }
        })
    })









})
